<!-- src/views/PostDetailView.vue -->
<!-- src/views/PostDetailView.vue -->
<template>
    <div class="post-detail-view">
        <div class="header">
            <el-button type="primary" @click="$router.go(-1)" style="margin-bottom: 20px;">
                <template #icon>
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                </template>
                返回
            </el-button>
            <h1 class="title">{{ post.nickname }} 的福州之旅</h1>
            <p class="subtitle">{{ formatTimeAgo(post.time) }} 发布</p>
        </div>

        <el-card shadow="never" class="detail-card">
            <!-- 评分 -->
            <div class="detail-rating">
                <el-rate v-model="post.rating" disabled text-color="#ff9900" :max="5" />
            </div>

            <!-- 内容 -->
            <div class="detail-content">
                <p>{{ post.content }}</p>
            </div>

            <!-- 标签 -->
            <div class="post-tags">
                <el-tag v-for="tag in post.tags" :key="tag" size="small" type="info" style="margin-right: 6px;">
                    #{{ tag }}
                </el-tag>
            </div>

            <!-- 显眼的点赞按钮 -->
            <div class="like-action">
                <el-button @click="toggleLike" :type="post.liked ? 'danger' : 'default'" size="large">
                    <template #icon>
                        <el-icon>
                            <component :is="post.liked ? 'StarFilled' : 'Star'" />
                        </el-icon>
                    </template>
                    {{ post.liked ? '已点赞！' : '点赞支持' }}
                </el-button>
            </div>

            <!-- 原有的统计栏（可选保留） -->
            <PostStatsBar :views="post.views" :likes="post.likes" :liked="post.liked" :comments="post.comments"
                @toggle-like="toggleLike" />
        </el-card>

        <!-- 评论区 -->
        <CommentSection :post-username="username" @comment-added="onCommentAdded" />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router' // 若使用 Vue Router
import PostStatsBar from '@/components/Post/PostStatsBar.vue'
import CommentSection from '@/components/Post/CommentSection.vue'

// 模拟用户
const username = '福州旅人'

// 模拟帖子数据（实际从 API 获取）
const route = useRoute()
const postId = route.params.id // 假设路由为 /post/:id

const post = ref({
    nickname: '闽江夜语',
    content: '夜游闽江太震撼了！灯光秀映照在江面上，配上微风，幸福感爆棚。推荐大家一定要来体验。',
    rating: 5,
    tags: ['闽江夜游', '灯光秀', '夜景'],
    time: Date.now() - 2 * 60 * 60 * 1000,
    views: 0,
    likes: 0,
    comments: 3, // 修正为实际的评论数量（2条主评论 + 1条回复 = 3条）
    liked: false
})

// 页面加载时 +1 浏览量
onMounted(() => {
    post.value.views++
})

// 格式化时间
const formatTimeAgo = (timestamp) => {
    const now = Date.now()
    const diff = now - timestamp
    const minute = 60 * 1000
    const hour = 60 * minute
    const day = 24 * hour
    if (diff < minute) return '刚刚'
    if (diff < hour) return `${Math.floor(diff / minute)}分钟前`
    if (diff < day) return `${Math.floor(diff / hour)}小时前`
    return `${Math.floor(diff / day)}天前`
}

// 点赞
const toggleLike = () => {
    if (post.value.liked) {
        post.value.likes--
    } else {
        post.value.likes++
    }
    post.value.liked = !post.value.liked
}

// 评论更新
const onCommentAdded = () => {
    post.value.comments++
}
</script>

<style scoped>
.post-detail-view {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}

.title {
    font-size: 28px;
    color: #006666;
    margin: 10px 0;
}

.subtitle {
    color: #666;
    font-size: 14px;
}

.detail-card {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
}

.detail-rating {
    margin-bottom: 16px;
}

.detail-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 16px;
}

.post-tags {
    margin-bottom: 20px;
}

.like-action {
    margin: 20px 0;
    text-align: center;
}

.like-count {
    display: block;
    margin-top: 8px;
    color: #999;
    font-size: 14px;
}
</style>